<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <div id="content"></div>
    <br/><br/>
    <input id="input" type="text" value="李克强"/>
    <input type="button" value="搜索" onclick="search()"/>
    <br/><br/>
    <div id="result"></div>
  </body>

  <script>
      // 1.设置文本内容
      let content = "李克强主持召开经济形势专家和企业家座谈会李克强:围绕市场主体有效实施宏观政策 推进改革开放 保持经济平稳运行 重要活动 会议活动考察调研接见会见讲话全文致电致信批示出访国务院令其他";
      document.getElementById('content').innerText = content;

      // 2.搜索方法
      function search() {
          // 获取搜索内容
          let searchVal = document.getElementById("input").value;

          // 拼接最终需要渲染的文本
          let finalStr = '';

          // 记录index
          let index = 0;

          // 搜索
          for (let i = 0; i < content.length; i = index + searchVal.length) {
              index = content.indexOf(searchVal, i);
              if (index == -1) {//未找到直接结束
                  finalStr += content.substring(i, content.length);
                  break;
              }

              finalStr += content.substring(i, index);
              finalStr += `<span style='color:red'>${searchVal}</span>`;
          }
          document.getElementById("result").innerHTML = finalStr;
      }
  </script>
</html>
